<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" trimDirectiveWhitespaces="true"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<link rel="stylesheet" href="${webcontext}/res/style/S.css" />
	<script type="text/javascript" src="${webcontext}/res/js/jquery.min.js"></script>
	<script type="text/javascript" src="${webcontext}/res/js/S.js"></script>
	<script type="text/javascript">
		$(function(){
			var context = new S.ContextMenu({
				el:'.themes',
				delegate:'li',
				items:{
					'使用该主题':function(li){
						
						var $li = $(li);
						if($li.is('.current')){
							new S.Info({text:'当前主题已经在使用了',type:'warn'}).show();return;
						}
						var data = $li.data();
						var name = data.name;
						
						S.request({
							url:'${webcontext}/${pathvar.admin}/blog/theme/change',
							data:{name:name},
							success:function(){
								new S.Info({text:'操作成功',type:'success'}).show();
								$('.themes .current').removeClass('current');
								$(li).addClass('current');
							}
						});
					},
					'重命名':function(li){
						var $li = $(li);
						var data = $li.data();
						var name = data.name;
						
						S.prompt('输入','新名称',function(val){
							S.request({
								url:'${webcontext}/${pathvar.admin}/blog/theme/rename',
								data:{name:name,dest:val},
								success:function(){
									new S.Info({text:'操作成功',type:'success'}).show();
									window.location.reload(true);
								}
							});
						});
					},
					'复制主题':function(li){
						var $li = $(li);
						var data = $li.data();
						var name = data.name;
						
						S.prompt('输入','新名称',function(val){
							S.request({
								url:'${webcontext}/${pathvar.admin}/blog/theme/copy',
								data:{name:name,dest:val},
								success:function(){
									new S.Info({text:'操作成功',type:'success'}).show();
									window.location.reload(true);
								}
							});
						});
					},
					'浏览主题文件':function(li){
						var $li = $(li);
						var data = $li.data();
						var name = data.name;
						window.location.href='${webcontext}/${pathvar.admin}/blog/theme/browse?theme='+name;
					},
					'删除':function(li){
						var $li = $(li);
						if($li.is('.current')){
							new S.Info({text:'当前主题正在使用',type:'warn'}).show();return;
						}
						S.confirm('警告','确认要删除该主题?',function(){
							var data = $li.data();
							var name = data.name;
							new S.Info({text:'操作成功',type:'success'}).show();
							window.location.href='${webcontext}/${pathvar.admin}/blog/theme/delete?theme='+name;
						},'danger'); 
					}
				}
			});
		});
	</script>
	<style type="text/css">
		.themes{width: 100%;list-style: none;}
		.themes li{width:150px;height: 150px;border:solid 1px #ccc;float: left;margin:5px;position: relative;cursor: pointer;box-shadow: 2px 2px 2px #ccc;}
		.themes li .name{height: 120px;padding: 5px;width: 100%;text-align: center;line-height: 120px;font-size:18px;font-family: tahoma;}
		.themes li .txt{position: absolute;bottom: 0px;width: 100%;height: 30px;line-height: 30px;text-align: center;cursor: pointer;}
		.themes li:not(.current):hover{background: #eee;}
		.themes li:not(.current):hover .txt{border-top:solid 1px #ccc;height: 31px;}
		.themes .current{border:solid 1px #44B50D;color:#F95B16;}
		.themes .current .txt{border-top:solid 1px #44B50D;}
	</style>
	</head>
	<body>
		<div class="filled-box">
			<div class="toolbar">
				<span class="btn"><i class="icons"></i> </span>
			</div>
			<div class="content">
				<ul class="themes">
					<c:forEach items="${themes }" var="theme">
					<li data-name="${theme }" ${theme == current?'class="current"':'' }>
						<div class="name">${theme }</div>
						<div class="txt">
							<c:if test="${theme == current }">当前 <i class="icons tick"></i></c:if>
							<c:if test="${theme != current }">使用该模板 <i class="icons layers_map"></i></c:if>
						</div>
					</li>
					</c:forEach>
				</ul>
			</div>
		</div>
	</body>
</html>